 <template xmlns="http://www.w3.org/1999/html">
<!--   抽奖页面实现思路：
      1.设置样式：选中增加高亮样式-->
   <div>
     <div v-loading="loading" >
       <el-row style="margin-left: 90px">
         <el-col :span="12" class="box-card">
           <!--    兑换码展示卡片-->
           <el-card  v-loading="loading" style="height: 300px;overflow: auto">
             <div slot="header" class="clearfix">
               <span>兑换码</span>
               <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
             </div>
             <div v-for="(code,index) in this.dhCodes" :key="index" class="text item">
               {{code.CTitle}} : {{ code.CCdk }}
             </div>
           </el-card>
           <!--    抽奖信息展示卡片-->
           <el-card  v-loading="loading2" style="margin-top: 20px">
             <div slot="header" class="clearfix">
               <span>抽奖信息面板</span>
             </div>
             <div style="line-height: 30px">
               <p>用户：<span>{{username}}</span></p>
               <p>余额：<span>{{number}}点券</span></p>
               <p>积分：<span>{{integral}}积分</span></p>
             </div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <div class="box">
             <div class="row" :class="select == index ? 'active' : ''" v-for="(item,index) in list" :key="index">
               {{item.name}}
             </div>
             <el-button
               @click="startDraw"
               type="primary" style="position:relative;top: 43%;left: 30%">
               抽奖
             </el-button>
             <el-button
               @click="tenStartDraw"
               type="primary" style="position:relative;top: 43%;left: 30%">
               十连抽
             </el-button>
           </div>
         </el-col>
       </el-row>
     </div>



   </div>
 </template>

 <script>
 export default {
   data() {
     return {
       list: [
         {
           name: "手机"
         },
         {
           name: "平板"
         },
         {
           name: "电磁炉"
         },
         {
           name: "洗衣机"
         },
         {
           name: "衣柜"
         },
         {
           name: "电脑"
         },
         {
           name: "电视"
         },
         {
           name: "冰箱"
         },
       ],
       number: 0,
       loading: true,
       loading2: true,
       //是否开始抽奖
       flag: true,
       //是否十连抽
       tenFlag: false,
       //页面对应抽奖下标
       select: 0,
       //定时器对象
       timer: "",
       //圈数
       count: 0,
       //定时器间隔时间
       timeout: 100,
       //最终奖品（兑换码）
       win: "",
       //兑换码
       dhCodes: {},
       //用户名
       username: "",
       //抽奖积分
       integral: 0
     };
   },
   created() {
     setTimeout(() => {
       this.loading = false;
     }, 500);
     let token = window.sessionStorage.getItem("token")
     this.username = token
     if (!token){
       this.$message.error("会话已超时,请重新登录")
       this.sleep(1000)
       this.$router.push("/login")
     }
     console.log(token)
     //查询用户兑换码
     this.$http.get("/user/getUserCdkInfo?accountname=" + window.sessionStorage.getItem("token")).then((result)=>{
       if (result.status == 200) {
         this.dhCodes = result.data.data
         this.loading = false
       }
     })
     //查询用户点券余额
     this.$http.post("/user/getUserCera?accountname=" + token).then(result => {
       if (result.status == 200) {
         this.number = result.data.data
         this.loading2 = false
       }
     })
   },
   methods:{
     //开始抽奖
     startDraw() {
       if (this.flag == true) {
         this.flag = false
         this.win = Math.floor(Math.random()*7) //中奖产品 0-7
         //创建定时器 100为间隔时间 时间越短 转速越快
         this.timer = setInterval(() => {
           this.select ++
           if (this.select >= 8){
             this.select = 0
             this.count ++
             if (this.count == 3){
               clearInterval(this.timer)
             }
           }
         }, this.timeout)
       }
     },

     //抽奖功能具体实现
     spinPrize() {
       var spin = 3 //旋转圈数
       this.select += 1
       if (this.select > 7 && this.count != spin) {
         //下标重置为0
         this.select = 0
         //圈数加1
         this.count += 1
       }
       if (this.select == this.win && this.count == spin) {
         //清除定时器
         clearInterval(this.timer)
         //抽奖标记重置
         this.flag = true
         //圈数重置为0
         this.count = 0
         if (this.tenFlag) {
           this.sleep(1000).then(() => {
             this.open(this.list[this.select].name)
           })
         }else {
           this.sleep(1000).then(() => {
             this.open(this.list[this.select].name)
           })
         }
         console.log("中奖产品为:" + this.list[this.select].name)
         this.integral++
         this.number--
       }
     },

     tenStartDraw(){},

     //程序休眠
     sleep(time){
       return new Promise((resolve) => setTimeout(resolve, time));
     },
    //中奖弹出框
     open(reward) {
       this.$http.post("/user/updateUserCera",{"accountname":this.username,"cera":this.number}).then((result)=>{
         if (result.status == 200) {
           console.log("点券扣减成功")
           this.$alert('获得道具兑换码'+ reward, '恭喜您', {
             confirmButtonText: '确定',
             callback: action => {
               let param = {"accountname":this.username,"cdk":"1234355656","cTitle":reward}
               this.$http.post("/user/insertUserCdk",param).then((result)=>{
                 this.$message({
                   type: 'success',
                   message: result.data.retmsg + ""
                 });
               })
             }
           });
         }else {
           console.log(result)
           console.log("余额扣减失败")
         }
       })

     },
   }
 };
 </script>
 <style>
 * {
   padding: 0;
   margin: 0;
 }

 .box {
   position: relative;
   margin-top: 15%;
   width: 400px;
   height: 400px;
   margin-left: 100px;
 }

 .btn{
   border-radius: 5px;
   width: 50px;
   border-color: #0b6fa2;
   border:none;
   margin-top: 50px;
 }

 .draw {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /*width: 150px;
   height: 150px;
   background: chocolate;
   text-align: center;
   line-height: 50px;
   color: #fff;
   cursor: pointer;*/
 }

 .row {
   position: absolute;
   width: 100px;
   height: 100px;
   line-height: 100px;
   background: cadetblue;
   color: #fff;
   text-align: center;
 }

 .box .row:nth-child(1) {
   top: 0;
   left: 0;
 }

 .box .row:nth-child(2) {
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
 }

 .box .row:nth-child(3) {
   top: 0;
   right: 0;
 }

 .box .row:nth-child(4) {
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
 }

 .box .row:nth-child(5) {
   bottom: 0;
   right: 0;
 }

 .box .row:nth-child(6) {
   bottom: 0;
   right: 50%;
   transform: translate(50%, 0);
 }

 .box .row:nth-child(7) {
   bottom: 0;
   left: 0;
 }

 .box .row:nth-child(8) {
   top: 50%;
   left: 0;
   transform: translate(0, -50%);
 }

 .active {
   -webkit-box-shadow: 0 0 5px rgba(0,113,241,1);
 }


 .text {
   font-size: 14px;
 }

 .item {
   margin-bottom: 18px;
 }

 .clearfix:before,
 .clearfix:after {
   display: table;
   content: "";
 }
 .clearfix:after {
   clear: both
 }

 .box-card {
   width: 480px;
   margin-top: 3%;
 }
 </style>
